/*
  学习目标：列表渲染-数组渲染, 类似vue中的v-for
  原理: 数组的map方法,会返回一个新的数组
  key: 提高diff算法更新dom的效率, 类似v-for要加key
  key要求: 值唯一

*/

import React from 'react';
import ReactDOM from 'react-dom';

const songs = ['温柔', '倔强', '私奔到月球'];

const divNode = (
  <div>
    <ul>
      {songs.map((item) => {
        return <li key={item}>{item}</li>;
      })}
    </ul>
  </div>
);

ReactDOM.render(divNode, document.getElementById('root'));
